<template>
	<view class="store-style">
		<view class="store-style-tit"><text class="current">2</text><text class="pages">/3</text><text class="name">您的性别、年龄、手机号</text></view>
		<view class="store-style-gender">
			<text class="label">性别</text>
			<view class="gender-list">
				<view v-for="(data,index) in gender" :key="index" :class="['gender-item',{active: formData.gender===data}]" @click="choseGender(data)">
					<view class="icon"><u-icon name="checkbox-mark" color="#FFF" size="24" v-if="formData.gender===data"></u-icon></view>
					{{data}}
				</view>
			</view>
		</view>
		<view :class="['store-style-ages',{active: formData.age}]" @click="show=!show">
			{{formData.age?formData.age:'选择您的年龄范围'}} <u-icon name="arrow-down" color="#B3B3B3" size="24"></u-icon>
		</view>
		<!-- <view class="store-style-phone">
			<input type="number" placeholder="请输入您的手机号" placeholder-class="place" />
		</view> -->
		<u-select v-model="show" :list="ages" @confirm="confirm"></u-select>
		<view class="prev" @click="prev">上一步</view>
		<view class="next"><view class="next-btn" @click="next">下一步</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				formData: {
					city: '',
					house: '',
					gender: '先生',
					age: ''
				},
				gender: ['先生','女士'],
				ages: [{
					label: '35岁以下',
					value: '35岁以下'
				},{
					label: '35岁-45岁',
					value: '35岁-45岁'
				},{
					label: '45岁以上',
					value: '45岁以上'
				}]
			};
		},
		onLoad(options) {
			this.formData.city = JSON.parse(options.parameter).city
			this.formData.house = JSON.parse(options.parameter).house
		},
		methods: {
			choseGender(data){
				this.formData.gender = data
			},
			confirm(e){
				this.formData.age = e[0].value
			},
			prev(){
				uni.navigateBack({
					animationDuration: 500,
					delta: 1
				})
			},
			next(){
				if(!this.formData.age){
					return uni.showToast({
						icon: 'none',
						title: '请选择您的年龄段'
					})
				}
				uni.navigateTo({
					animationDuration: 500,
					url: '/merchant/store-style/store-style-3?parameter='+JSON.stringify(this.formData)
				})
			}
		}
	}
</script>

<style lang="scss">
	.store-style{
		padding: 0 55rpx 120rpx;
		.store-style-gender{
			height: 100rpx;
			background-color: #F7F7F7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			border-radius: 8rpx;
			.label{
				font-weight: bold;
				color: #444;
				font-size: 32rpx;
			}
			.gender-list{
				display: flex;
				align-items: center;
				.gender-item{
					display: flex;
					align-items: center;
					margin-left: 60rpx;
					font-size: 32rpx;
					color: #141414;
					&.active{
						.icon{
							background-color: #141414;
							border-color: #141414;
						}
					}
					.icon{
						border-radius: 4rpx;
						width: 36rpx;
						height: 36rpx;
						border: solid 2rpx #CCC;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
					}
				}
			}
		}
		.store-style-ages{
			margin-top: 40rpx;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			color: #B3B3B3;
			background-color: #F7F7F7;
			padding: 0 30rpx;
			&.active{
				color: #141414;
			}
		}
		.store-style-phone{
			margin-top: 40rpx;
			input{
				height: 110rpx;
				padding: 0 30rpx;
				background-color: #F7F7F7;
			}
			.place{
				color: #B3B3B3;
			}
		}
	}
	.store-style-tit{
		padding: 85rpx 0;
		font-size: 32rpx;
		color: #282220;
		font-weight: bold;
		.current{
			font-size: 52rpx;
			color: #282220;
			font-weight: bold;
		}
		.pages{
			margin-right: 30rpx;
		}
	}
	.prev{
		position: fixed;
		bottom: 200rpx;
		left: 0;
		right: 0;
		text-align: center;
		text-decoration: underline;
		font-size: 28rpx;
		color: #444;
	}
	.next{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFF;
		height: 120rpx;
		display: flex;
		align-items: center;
		border-top: solid 2rpx #F4F4F4;
		.next-btn{
			height: 90rpx;
			line-height: 90rpx;
			background: #141414;
			border-radius: 8rpx;
			margin: 0 75rpx;
			color: #FFF;
			font-size: 32rpx;
			flex: 1;
			text-align: center;
		}
	}
</style>
